<template>
    <div>
        <SuperTable ref="table" path="/order/refund/index" :params="params" :columns="columns" @on-selection-change="handleSelectionChange">
            <div slot="header-right">
                <Form ref="filter" :model="filter" inline>
                    <FormItem label="关键词">
                        <Input v-model="filter.order_sn" clearable placeholder="订单号" style="width: 200px;" />
                    </FormItem>
                    <FormItem label="审核状态" prop="apply_status">
                        <Select v-model="filter.apply_status" clearable style="width: 80px">
                            <Option :value="-1">已驳回</Option>
                            <Option :value="0">待审核</Option>
                            <Option :value="1">已通过</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="状态" prop="status">
                        <Select v-model="filter.status" clearable style="width: 80px">
                            <Option :value="-1">退款失败</Option>
                            <Option :value="0">处理中</Option>
                            <Option :value="1">退款完成</Option>
                        </Select>
                    </FormItem>
                    <Button type="primary" @click="handlFilter">筛选</Button>
                </Form>
            </div>
            <div slot="page-left">
                <Button type="error" :disabled="selectedOrders.length == 0" @click="handleBatchRefund">批量审核</Button>
            </div>
        </SuperTable>

        <Modal
            :title="'已选择'+selectedOrders.length+'条，过滤后剩余'+confirmRefundOrders.length+'条可审核，注意：此操作为异步操作，需要一定执行时间，请耐心等待几秒后刷新页面！'"
            v-model="showRefundModal"
            :width="1300"
        >
            <Table :width="1270" :columns="columnsRefund" :data="confirmRefundOrders">
                <template slot-scope="{ row, index }" slot="refund_amount">
                    <InputNumber v-model="confirmRefundOrders[index].refund_amount" :min="0.01" :precision="2" :active-change="false" style="width: 100%;" />
                </template>
            </Table>
            <Form ref="form" :model="formData" :rules="rules" :label-width="84" style="margin-top:10px">
                <FormItem label="审核状态：" prop="apply_status" required>
                    <RadioGroup v-model="formData.apply_status" >
                        <Radio :label="1">通过</Radio>
                        <Radio :label="-1">驳回</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem v-if="formData.apply_status == -1" label="驳回原因：" prop="remark">
                    <Input v-model="formData.remark" :rows="3" style="width: 300px" type="textarea" placeholder="请填写驳回原因" />
                </FormItem>
            </Form>
            <div slot="footer">
                <Button :disabled="submiting" @click="handleCancel">关闭</Button>
                <Button type="primary" :loading="submiting" @click="handleSubmit">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import SuperTable from '@/components/utils/super-table.vue';
import TableRows from '@/components/utils/table-rows.vue';
import SetInput from '@/components/form/set-input.vue';
export default {
    components: {
        SuperTable,
        TableRows,
        SetInput
    },
    data() {
        return {
            submiting: false,
            showRefundModal: false,
            confirmRefundOrders: [],
            selectedOrders: [],
            formData: {
                refund_info: [
                    {order_sn: ''},
                    {refund_amount: 0},
                ],
                apply_status: 1,
                remark: '',
            },
            rules: {
                apply_status: [
                    {required: true, type: 'number', message: '请选择审核状态', trigger: 'change'}
                ]
            },
            filter: {
                order_sn: '',
                apply_status: '',
                status: ''
            },
            params: {
                page: 1,
                pageSize: 10
            },
            columns: [
                {
                    type: 'selection',
                    fixed: 'left',
                    width: 50,
                    align: 'center',
                    _disabled: true
                },
                {
                    title: '订单信息',
                    minWidth: 120,
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`订单号：${params.row.order_sn}`),
                            h('p',`退款单号：${params.row.refund_sn}`)
                        ])
                    }
                },
                {
                    title: '票档信息',
                    minWidth: 150,
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`${params.row.order_info.project_name}`),
                            h('p',[
                                h('span',`${params.row.order_info.concert_name + '  ' + params.row.order_info.sku_name}` + '  '),
                                h('span', {style:{color:'red'}}, `${params.row.order_info.number}张`)
                            ]),
                        ])
                    }
                },
                {
                    title: '支付渠道&用户',
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`支付渠道：${params.row.pay_info ? params.row.pay_info.pay_method_text : '-'}`),
                            h('p',`用户：${params.row.order_info.phone}`),
                        ])
                    }
                },
                {
                    title: '支付&退款金额',
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`支付金额：${params.row.pay_amount}`),
                            h('p',`退款金额：${params.row.refund_amount}`),
                        ])
                    }
                },
                {
                    title: '申请时间&申请人',
                    minWidth: 120,
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`申请时间：${params.row.created_at}`),
                            h('p',`申请人：${params.row.admin ? params.row.admin.realname+"[管理员]" : params.row.order_info.buyer_name}`)
                        ])
                    }
                },
                {
                    title: '审核&退款状态',
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`审核状态：${params.row.apply_status_text}`),
                            h('p',`退款状态：${params.row.status_text}`),
                        ])
                    }
                },
                {
                    title: "操作",
                    align: "center",
                    key: "action",
                    width: 120,
                    render: (h, params) => {
                        return h("div", [
                            h('Button', {
                                props: {
                                    type: "error",
                                    size: 'small',
                                    disabled: params.row.apply_status != 0
                                },
                                on: {
                                    click: () => {
                                        this.showRefundModal = true;
                                        params.row.refund_amount = params.row.pay_amount != params.row.refund_amount ? Number(params.row.refund_amount) : Number(params.row.pay_amount);
                                        this.confirmRefundOrders = [params.row];
                                        this.selectedOrders = [params.row];
                                    }
                                }
                            }, '审核')
                        ])
                    }
                }
            ],
            columnsRefund: [
                {
                    title: "序号",
                    type: "index",
                    align: "center",
                    width: 54
                },
                {
                    title: '订单信息',
                    minWidth: 120,
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`订单号：${params.row.order_sn}`),
                            h('p',`退款单号：${params.row.refund_sn}`)
                        ])
                    }
                },
                {
                    title: '票档信息',
                    minWidth: 150,
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`${params.row.order_info.project_name}`),
                            h('p',[
                                h('span',`${params.row.order_info.concert_name + '  ' + params.row.order_info.sku_name}` + '  '),
                                h('span', {style:{color:'red'}}, `${params.row.order_info.number}张`)
                            ]),
                        ])
                    }
                },
                {
                    title: '卖家&买家',
                    minWidth: 80,
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',params.row.order_info.partner ? params.row.order_info.partner.name : '-'),
                            h('p',`${params.row.order_info.user.phone || '-'}`)
                        ])
                    }
                },
                {
                    title: '申请时间&申请人',
                    minWidth: 120,
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`${params.row.created_at}`),
                            h('p',`${params.row.admin ? params.row.admin.realname+"[管理员]" : params.row.order_info.buyer_name}`)
                        ])
                    }
                },
                {
                    title: '资金信息',
                    minWidth: 80,
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`支付金额：${params.row.order_info.real_amount}`),
                            h('p',`委托总额：${params.row.order_info.partner_amount}`),
                        ])
                    }
                },
                {
                    title: '退款金额',
                    slot:'refund_amount',
                    width: 100,
                    renderHeader: (h, params) => {
                        return h(SetInput, {
                            props: {
                                title: '退款金额'
                            },
                            on: {
                                change: (obj) => {
                                    this.confirmRefundOrders = this.confirmRefundOrders.map(item => {
                                        if (obj.setType == 1){
                                            item.refund_amount = item.pay_amount * obj.value;
                                        }else{
                                            item.refund_amount = obj.value;
                                        }
                                        return item;
                                    })
                                }
                            }
                        })
                    },
                },
                {
                    title: '操作',
                    width: 80,
                    render: (h, params) => {
                        return h('Button', {
                            props: {
                                size: 'small',
                                type: 'error'
                            },
                            on: {
                                click: () => {
                                    this.confirmRefundOrders.splice(params.index, 1);
                                }
                            }
                        }, '删除');
                    }
                }
            ],
        }
    },
    mounted() {
        if ('apply_status' in this.$route.query) {
            this.filter.apply_status = this.$route.query.apply_status;
            this.params.apply_status = this.$route.query.apply_status;
            this.$refs.table.init();
        }
    },
    methods: {
        handleSelectionChange(selections){
            this.selectedOrders = selections
        },
        handlFilter() {
            const { filter } = this;
            this.params.order_sn = filter.order_sn;
            this.params.apply_status = filter.apply_status;
            this.params.status = filter.status;
            this.$refs.table.init();
        },
        //批量审核
        handleBatchRefund(){
            this.showRefundModal = true;
            let _lists = [];
            this.selectedOrders.map(item =>{
                if (item.apply_status == 0){
                    item.refund_amount = item.pay_amount != item.refund_amount ? Number(item.refund_amount) : Number(item.pay_amount);
                    _lists.push(item);
                }
            })
            this.confirmRefundOrders = _lists;
        },
        handleSubmit() {
            if(this.submiting) return false;
            this.$refs.form.validate((valid) => {
                if(valid) {
                    if (this.formData.apply_status == -1 && !this.formData.remark){
                        this.$Message.error('驳回原因必填');
                        return false;
                    }
                    let refund_info = [];
                    this.confirmRefundOrders.map(item => {
                        let obj = {
                            refund_sn: item.refund_sn,
                            refund_amount: item.refund_amount
                        }
                        refund_info.push(obj);
                    })
                    if (refund_info.length == 0){
                        this.$Message.error('无可操作数据');
                        return false;
                    }
                    let params = {
                        refund_info: refund_info,
                        apply_status: this.formData.apply_status,
                        remark: this.formData.remark
                    }
                    const msg = this.$Message.loading({
                        content: '正在提交',
                        duration: 0
                    });
                    this.submiting = true;
                    this.isWait = true;
                    this.$ajax.post('/order/refund/batch_audit', params).then(() => {
                        msg();
                        this.$Message.success('操作成功');
                        this.submiting = false;
                        this.showRefundModal = false;
                        setTimeout(() => {
                            this.$refs.table.reload();
                            this.isWait = false;
                        }, 2000)
                    }).catch(err => {
                        msg();
                        this.submiting = false;
                        this.isWait = false;
                        this.$Message.error(err.message || '操作失败');
                    })
                }
            })
        },
        handleCancel(){
            this.showRefundModal = false;
            this.confirmRefundOrders = [];
            this.$refs.table.reload();
        },
    }
}
</script>